import { HashRouter,
   Routes, 
   Link, 
   Route, 
   useNavigate, 
   replace, 
   useSearchParams, 
   useParams,
  } from 'react-router-dom'
//Routes 整个路由列表
function Home(){
  const navigate = useNavigate()

  return(
    <div>
      <h2>首页</h2>
      <button onClick={()=>navigate('/about/1001',{replace:true})}>go about</button>
    </div>
  )
}

function About(){
  // const [Params,setParams] = useSearchParams()
  // console.log(Params.get('id'));

  const Params = useParams()
  
  console.log(Params);
  
  return(
    <div>
      <h2>关于 -- {Params.id}</h2>
    </div>
  )
}
function App() {
  return(
    <div className="App">
      {/*路由配置区域*/}
      <HashRouter>
        <Link to='/'>首页</Link>
        <Link to='/about'>关于</Link>

        <Routes>
        <Route path='/' element={<Home/>}></Route>
        <Route path='/about/:id' element={<About/>}></Route>
      </Routes>
      </HashRouter>

      

     
    </div>
  )
}

export default App